<template>
  <view class="modal-overlay" v-if="show" @click="handleClose">
    <view class="modal-content" @click.stop>
      <view class="modal-header">
        <text class="modal-title">导出日记</text>
        <view class="close-btn" @click="handleClose">
          <uni-icons type="close" size="20" color="#666"></uni-icons>
        </view>
      </view>
      
      <view class="export-options">
        <!-- 导出格式 -->
        <view class="option-section">
          <text class="section-label">导出格式</text>
          <view class="format-options">
            <view 
              class="format-item" 
              v-for="format in formatOptions" 
              :key="format.value"
              :class="{ active: selectedFormat === format.value }"
              @click="selectFormat(format.value)"
            >
              <view class="format-icon" :style="{ backgroundColor: format.color + '20' }">
                <uni-icons :type="format.icon" size="20" :color="format.color"></uni-icons>
              </view>
              <view class="format-info">
                <text class="format-name">{{ format.name }}</text>
                <text class="format-desc">{{ format.description }}</text>
              </view>
              <view class="format-check" v-if="selectedFormat === format.value">
                <uni-icons type="checkmarkempty" size="16" color="#1890ff"></uni-icons>
              </view>
            </view>
          </view>
        </view>
        
        <!-- 时间范围 -->
        <view class="option-section">
          <text class="section-label">时间范围</text>
          <view class="date-range">
            <view class="date-item" @click="showStartDatePicker = true">
              <text class="date-label">开始日期</text>
              <text class="date-value">{{ startDate || '选择日期' }}</text>
            </view>
            <view class="date-separator">
              <text class="separator-text">至</text>
            </view>
            <view class="date-item" @click="showEndDatePicker = true">
              <text class="date-label">结束日期</text>
              <text class="date-value">{{ endDate || '选择日期' }}</text>
            </view>
          </view>
          
          <!-- 快捷选择 -->
          <view class="quick-select">
            <view 
              class="quick-item" 
              v-for="quick in quickRanges" 
              :key="quick.value"
              @click="selectQuickRange(quick)"
            >
              <text class="quick-text">{{ quick.label }}</text>
            </view>
          </view>
        </view>
      </view>
      
      <view class="modal-footer">
        <button class="cancel-btn" @click="handleClose">取消</button>
        <button class="export-btn" :disabled="!canExport" @click="handleExport">
          <text class="btn-text">{{ exporting ? '导出中...' : '开始导出' }}</text>
        </button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'ExportDataModal',
  props: {
    show: {
      type: Boolean,
      default: false
    }
  },
  emits: ['update:show', 'success'],
  data() {
    return {
      exporting: false,
      selectedFormat: 'pdf',
      startDate: '',
      endDate: '',
      showStartDatePicker: false,
      showEndDatePicker: false,
      
      formatOptions: [
        {
          value: 'pdf',
          name: 'PDF文档',
          description: '适合打印和阅读',
          icon: 'compose',
          color: '#ff4d4f'
        },
        {
          value: 'json',
          name: 'JSON数据',
          description: '包含完整数据结构',
          icon: 'gear',
          color: '#1890ff'
        },
        {
          value: 'txt',
          name: '纯文本',
          description: '简洁的文本格式',
          icon: 'compose',
          color: '#52c41a'
        }
      ],
      
      quickRanges: [
        { label: '最近一周', value: 'week', days: 7 },
        { label: '最近一月', value: 'month', days: 30 },
        { label: '最近三月', value: 'quarter', days: 90 },
        { label: '最近一年', value: 'year', days: 365 }
      ]
    }
  },
  computed: {
    canExport() {
      return this.startDate && this.endDate && !this.exporting
    }
  },
  watch: {
    show(newVal) {
      if (newVal) {
        this.initModal()
      }
    }
  },
  methods: {
    initModal() {
      // 设置默认时间范围（最近一月）
      const now = new Date()
      const oneMonthAgo = new Date(now.getTime() - 30 * 24 * 60 * 60 * 1000)
      
      this.endDate = this.formatDate(now)
      this.startDate = this.formatDate(oneMonthAgo)
    },
    
    selectFormat(format) {
      this.selectedFormat = format
    },
    
    selectQuickRange(range) {
      const now = new Date()
      const startDate = new Date(now.getTime() - range.days * 24 * 60 * 60 * 1000)
      
      this.endDate = this.formatDate(now)
      this.startDate = this.formatDate(startDate)
    },
    
    formatDate(date) {
      return date.toISOString().split('T')[0]
    },
    
    async handleExport() {
      if (!this.canExport) return
      
      this.exporting = true
      
      try {
        // 模拟导出过程
        await new Promise(resolve => setTimeout(resolve, 2000))
        
        uni.showToast({
          title: '导出成功',
          icon: 'success'
        })
        
        this.$emit('success')
        this.handleClose()
        
      } catch (error) {
        uni.showToast({
          title: '导出失败',
          icon: 'none'
        })
      } finally {
        this.exporting = false
      }
    },
    
    handleClose() {
      this.$emit('update:show', false)
    }
  }
}
</script>

<style scoped>
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  width: 90%;
  max-width: 640rpx;
  background-color: #ffffff;
  border-radius: 24rpx;
  overflow: hidden;
  animation: modalShow 0.3s ease-out;
}

@keyframes modalShow {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 32rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.modal-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333333;
}

.close-btn {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 30rpx;
  background-color: #f8f8f8;
}

.export-options {
  max-height: 60vh;
  overflow-y: auto;
  padding: 32rpx;
}

.option-section {
  margin-bottom: 48rpx;
}

.option-section:last-child {
  margin-bottom: 0;
}

.section-label {
  display: block;
  font-size: 28rpx;
  font-weight: 600;
  color: #333333;
  margin-bottom: 24rpx;
}

.format-options {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.format-item {
  display: flex;
  align-items: center;
  padding: 24rpx;
  border: 2rpx solid #f0f0f0;
  border-radius: 16rpx;
  transition: all 0.3s;
}

.format-item.active {
  border-color: #1890ff;
  background-color: #f6ffed;
}

.format-icon {
  width: 64rpx;
  height: 64rpx;
  border-radius: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 24rpx;
}

.format-info {
  flex: 1;
}

.format-name {
  display: block;
  font-size: 28rpx;
  font-weight: 500;
  color: #333333;
  margin-bottom: 8rpx;
}

.format-desc {
  font-size: 24rpx;
  color: #666666;
}

.format-check {
  width: 40rpx;
  height: 40rpx;
  border-radius: 20rpx;
  background-color: #1890ff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.date-range {
  display: flex;
  align-items: center;
  gap: 16rpx;
  margin-bottom: 24rpx;
}

.date-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8rpx;
  padding: 24rpx;
  background-color: #f8f8f8;
  border-radius: 16rpx;
}

.date-label {
  font-size: 24rpx;
  color: #666666;
}

.date-value {
  font-size: 28rpx;
  color: #333333;
  font-weight: 500;
}

.date-separator {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16rpx;
}

.separator-text {
  font-size: 24rpx;
  color: #666666;
}

.quick-select {
  display: flex;
  gap: 16rpx;
  flex-wrap: wrap;
}

.quick-item {
  padding: 16rpx 24rpx;
  background-color: #f0f0f0;
  color: #666666;
  border-radius: 20rpx;
  font-size: 24rpx;
  transition: all 0.3s;
}

.quick-item:active {
  background-color: #1890ff;
  color: #ffffff;
}

.modal-footer {
  display: flex;
  gap: 24rpx;
  padding: 32rpx;
  border-top: 1rpx solid #f0f0f0;
}

.cancel-btn {
  flex: 1;
  height: 88rpx;
  background-color: #ffffff;
  border: 2rpx solid #d9d9d9;
  border-radius: 44rpx;
  font-size: 28rpx;
  color: #666666;
}

.cancel-btn::after {
  border: none;
}

.export-btn {
  flex: 2;
  height: 88rpx;
  background-color: #1890ff;
  border: none;
  border-radius: 44rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  color: #ffffff;
}

.export-btn:disabled {
  background-color: #cccccc;
}

.export-btn::after {
  border: none;
}

.btn-text {
  font-size: 28rpx;
  color: #ffffff;
}
</style> 